<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/unis.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/import-htmt.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/template.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div style="width: 95%; margin: auto" id="childApp">
    <div class=" mt-4 col " style="font-size: 24px">
        Time pick
    </div>


    <dfault-vuew>
        <template v-slot:htm>
            <div class=" br-1 br-grey300 br-ra6 mt-4 " style="width: 808px; ">
                <div class="win100 d-flex " style="padding:24px 32px 0 32px">
                    <div class="col p-0 f-b ft-grey700 d-flex align-items-center">
                        <i class="icon-15 mr-3 cursor-p"></i>
                        July
                    </div>
                    <div class="f-18 f-b">August 2021</div>
                    <div class="col p-0 f-b ft-grey700 d-flex justify-content-end align-items-center">
                        September <i class="icon-8 ml-3 cursor-p ft-grey900"></i></div>
                </div>
                <div class="mt-1 d-flex  justify-content-end align-items-center" style="padding:12px 32px  24px 32px">
                    <button class="unis-time-pick-btn h-w-32 mr-2 br-grey400" disabled>
                        <i class="icon-15 br-grey400"></i>
                    </button>
                    <div style="width:130px "><input type="text" value="This week"
                                                     class="unis-input active t-center br-grey400"></div>

                    <button class="unis-time-pick-btn ml-2 h-w-32 br-grey400">
                        <i class="icon-8"></i>
                    </button>
                </div>
                <div class="br-t-1 br-grey300"></div>
                <div class=" d-flex " style="padding-right: 32px;padding-left: 32px">
                    <div class="pr-0 " style="width: 80px">
                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white f-b f-16 pl-2 ft-grey700"> MON</div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white f-b f-24 pl-2"> 01</div>
                        <div class=" " style="height: 16px;"></div>
                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white   po-r " style="height: 40px;">
                            <div class="po-a"
                                 style="left:-16px; top: 0;  width: 80px;  height: 40px; line-height: 35px ">
                                <button class="unis-time-pick-btn large   "
                                        >
                                    10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class=" " style="height: 8px;"></div>
                    </div>
                    <div class="p-0 t-center" style="width: 116px">

                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white f-b f-16 ft-grey700"> TUE</div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white f-b f-24 "> 02</div>
                        <div class=" " style="height: 16px;"></div>
                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white  ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                        > 10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                        > 10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                        > 11:00 AM
                                </button>
                            </div>
                        </div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                        > 01:30 PM
                                </button>
                            </div>
                        </div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                        > 02:30 PM
                                </button>
                            </div>
                        </div>


                    </div>
                    <div class="p-0 t-center" style="width: 116px">

                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white f-b f-16 ft-grey700"> WED</div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white f-b f-24 "> 03</div>
                        <div class=" " style="height: 16px;"></div>
                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white  ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large   "
                                        > 10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                        > 10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                        > 11:00 AM
                                </button>
                            </div>
                        </div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                        > 01:30 PM
                                </button>
                            </div>
                        </div>

                    </div>
                    <div class="p-0 t-center" style="width: 116px">

                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white f-b f-16 ft-grey700"> THUR</div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white f-b f-24 "> 04</div>
                        <div class=" " style="height: 16px;"></div>
                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white  ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large  "
                                        >
                                    10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                        > 10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                        > 11:00 AM
                                </button>
                            </div>
                        </div>

                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                        > 01:30 PM
                                </button>
                            </div>
                        </div>

                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                        > 02:30 PM
                                </button>
                            </div>
                        </div>

                    </div>
                    <div class="p-0 t-center" style="width: 116px">

                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white f-b f-16 ft-grey700"> FRI</div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white f-b f-24 "> 05</div>
                        <div class=" " style="height: 16px;"></div>
                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white  ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large  "
                                        >
                                    10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                        > 11:00 AM
                                </button>
                            </div>
                        </div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                        > 01:30 PM
                                </button>
                            </div>
                        </div>

                    </div>
                    <div class="p-0 t-center" style="width: 116px">

                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white f-b f-16 ft-grey700"> SAT</div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white f-b f-24 "> 06</div>
                        <div class=" " style="height: 16px;"></div>
                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white  ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large" > 10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class=" " style="height: 8px;"></div>

                    </div>
                    <div class="p-0" style="width: 80px; text-align: right">
                        <div>
                            <div class=" " style="height: 16px;"></div>
                            <div class="bg-white f-b f-16 pr-2 ft-grey700"> SUN</div>
                            <div class=" " style="height: 8px;"></div>
                            <div class="bg-white f-b f-24 pr-2"> 07</div>
                            <div class=" " style="height: 16px;"></div>
                            <div class=" " style="height: 16px;"></div>
                            <div class="bg-white   po-r"  style="height: 40px;" >
                                <div class="po-a"
                                     style=" right:-16px ; top: 0;  width: 80px;  height: 40px; line-height: 35px ">
                                    <button class="unis-time-pick-btn large  "
                                            >
                                        10:30 AM
                                    </button>
                                </div>
                            </div>
                            <div class=" " style="height: 8px;"></div>

                        </div>
                    </div>
                </div>

            </div>

        </template>
        <template v-slot:htmcode>
            <div class=" br-1 br-grey300 br-ra6 mt-4 " style="width: 808px; ">
                <div class="win100 d-flex " style="padding:24px 32px 0 32px">
                    <div class="col p-0 f-b ft-grey700 d-flex align-items-center">
                        <i class="icon-15 mr-3 cursor-p"></i>
                        July
                    </div>
                    <div class="f-18 f-b">August 2021</div>
                    <div class="col p-0 f-b ft-grey700 d-flex justify-content-end align-items-center">
                        September <i class="icon-8 ml-3 cursor-p ft-grey900"></i></div>
                </div>
                <div class="mt-1 d-flex  justify-content-end align-items-center" style="padding:12px 32px  24px 32px">
                    <button class="unis-time-pick-btn h-w-32 mr-2 br-grey400" disabled>
                        <i class="icon-15 br-grey400"></i>
                    </button>
                    <div style="width:130px "><input type="text" value="This week"
                                                     class="unis-input active t-center br-grey400"></div>

                    <button class="unis-time-pick-btn ml-2 h-w-32 br-grey400">
                        <i class="icon-8"></i>
                    </button>
                </div>
                <div class="br-t-1 br-grey300"></div>
                <div class=" d-flex " style="padding-right: 32px;padding-left: 32px">
                    <div class="pr-0 " style="width: 80px">
                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white f-b f-16 pl-2 ft-grey700"> MON</div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white f-b f-24 pl-2"> 01</div>
                        <div class=" " style="height: 16px;"></div>
                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white   po-r " style="height: 40px;">
                            <div class="po-a"
                                 style="left:-16px; top: 0;  width: 80px;  height: 40px; line-height: 35px ">
                                <button class="unis-time-pick-btn large   "
                                >
                                    10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class=" " style="height: 8px;"></div>
                    </div>
                    <div class="p-0 t-center" style="width: 116px">

                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white f-b f-16 ft-grey700"> TUE</div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white f-b f-24 "> 02</div>
                        <div class=" " style="height: 16px;"></div>
                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white  ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                > 10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                > 10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                > 11:00 AM
                                </button>
                            </div>
                        </div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                > 01:30 PM
                                </button>
                            </div>
                        </div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                > 02:30 PM
                                </button>
                            </div>
                        </div>


                    </div>
                    <div class="p-0 t-center" style="width: 116px">

                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white f-b f-16 ft-grey700"> WED</div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white f-b f-24 "> 03</div>
                        <div class=" " style="height: 16px;"></div>
                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white  ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large   "
                                > 10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                > 10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                > 11:00 AM
                                </button>
                            </div>
                        </div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                > 01:30 PM
                                </button>
                            </div>
                        </div>

                    </div>
                    <div class="p-0 t-center" style="width: 116px">

                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white f-b f-16 ft-grey700"> THUR</div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white f-b f-24 "> 04</div>
                        <div class=" " style="height: 16px;"></div>
                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white  ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large  "
                                >
                                    10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                > 10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                > 11:00 AM
                                </button>
                            </div>
                        </div>

                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                > 01:30 PM
                                </button>
                            </div>
                        </div>

                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                > 02:30 PM
                                </button>
                            </div>
                        </div>

                    </div>
                    <div class="p-0 t-center" style="width: 116px">

                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white f-b f-16 ft-grey700"> FRI</div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white f-b f-24 "> 05</div>
                        <div class=" " style="height: 16px;"></div>
                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white  ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large  "
                                >
                                    10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                > 11:00 AM
                                </button>
                            </div>
                        </div>
                        <div class="bg-white  " style="height: 50px; ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large"
                                > 01:30 PM
                                </button>
                            </div>
                        </div>

                    </div>
                    <div class="p-0 t-center" style="width: 116px">

                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white f-b f-16 ft-grey700"> SAT</div>
                        <div class=" " style="height: 8px;"></div>
                        <div class="bg-white f-b f-24 "> 06</div>
                        <div class=" " style="height: 16px;"></div>
                        <div class=" " style="height: 16px;"></div>
                        <div class="bg-white  ">
                            <div style=" width: 80px;  height: 40px; line-height: 35px; margin: auto ">
                                <button class="unis-time-pick-btn large" > 10:30 AM
                                </button>
                            </div>
                        </div>
                        <div class=" " style="height: 8px;"></div>

                    </div>
                    <div class="p-0" style="width: 80px; text-align: right">
                        <div>
                            <div class=" " style="height: 16px;"></div>
                            <div class="bg-white f-b f-16 pr-2 ft-grey700"> SUN</div>
                            <div class=" " style="height: 8px;"></div>
                            <div class="bg-white f-b f-24 pr-2"> 07</div>
                            <div class=" " style="height: 16px;"></div>
                            <div class=" " style="height: 16px;"></div>
                            <div class="bg-white   po-r"  style="height: 40px;" >
                                <div class="po-a"
                                     style=" right:-16px ; top: 0;  width: 80px;  height: 40px; line-height: 35px ">
                                    <button class="unis-time-pick-btn large  "
                                    >
                                        10:30 AM
                                    </button>
                                </div>
                            </div>
                            <div class=" " style="height: 8px;"></div>

                        </div>
                    </div>
                </div>

            </div>
        </template>
    </dfault-vuew>
    <div class="f-24 " style=" margin-top: 180px">

    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="br-1 br-grey300 br-ra6 mt-4" style="width: 786px;">
                <div class=" d-flex flex-column p-4">
                    <div class="wid100 d-flex align-items-center">
                        <div class="bg-grey900 ft-white f-13 f-b d-flex align-items-center justify-content-center "
                             style="width: 24px; height: 24px; border-radius: 100%; line-height: 13px">2
                        </div>
                        <h2 class="mt-2 ml-4">When would you like to schedule this appointment?</h2>
                    </div>
                    <div class="wid100 mt-2 ">
                        <h3 class="ft-grey700">Choose a date and time</h3>
                    </div>
                    <div class="wid100 d-flex mt-4 unis-date-and-time-sept">
                        <div class="pl-0 mr-4 " style="width: 520px">
                            <div class="d-flex justify-content-around align-items-center">
                                <i class="icon-15 cursor-p"></i>
                                <span class="f-18 f-b">September</span>
                                <i class="icon-8 cursor-p"></i>
                            </div>
                            <div class="d-flex flex-wrap justify-content-between">
                                <div class="ft-grey700 mr-3 mt-2 br-ra2 d-flex justify-content-center align-items-center"
                                     style=" width:50px; height: 40px;  " v-for="i in ['S','M','T','W','T','F','S' ]">
                                    {{i}}
                                </div>
                                <div class="seat br-ra2 mr-3 mt-2 d-flex justify-content-center align-items-center"
                                     style=" width:50px; height: 40px;  " v-for="i in [ '1','2','3','4','5','6','7' ]">
                                    {{i}}
                                </div>
                                <div class=" mr-3 mt-2  d-flex br-ra2 justify-content-center align-items-center"
                                     style=" width:50px; height: 40px;  "
                                     :class="{'same-day':i=='11'}"
                                     v-for="i in ['8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','1','2','3','4']">
                                    {{i}}
                                </div>
                            </div>


                        </div>
                        <div class="col  p-0">
                            <div class="f-18 f-b">Today, Sept. 11, 2020</div>
                            <div class="overflow-h-auto pr-2" style="height: 288px;  ">
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">11:00</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">11:30</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">12:00</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">12:30</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">13:00</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">13:30</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">14:00</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">14:30</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">15:00</button>

                            </div>
                        </div>

                    </div>

                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <div class="br-1 br-grey300 br-ra6 mt-4" style="width: 786px;">
                <div class=" d-flex flex-column p-4">
                    <div class="wid100 d-flex align-items-center">
                        <div class="bg-grey900 ft-white f-13 f-b d-flex align-items-center justify-content-center "
                             style="width: 24px; height: 24px; border-radius: 100%; line-height: 13px">2
                        </div>
                        <h2 class="mt-2 ml-4">When would you like to schedule this appointment?</h2>
                    </div>
                    <div class="wid100 mt-2 ">
                        <h3 class="ft-grey700">Choose a date and time</h3>
                    </div>
                    <div class="wid100 d-flex mt-4 unis-date-and-time-sept">
                        <div class="pl-0 mr-4 " style="width: 520px">
                            <div class="d-flex justify-content-around align-items-center">
                                <i class="icon-15 cursor-p"></i>
                                <span class="f-18 f-b">September</span>
                                <i class="icon-8 cursor-p"></i>
                            </div>
                            <div class="d-flex flex-wrap justify-content-between">
                                <div class="ft-grey700 mr-3 mt-2 br-ra2 d-flex justify-content-center align-items-center"
                                     style=" width:50px; height: 40px;  " v-for="i in ['S','M','T','W','T','F','S' ]">
                                    {{i}}
                                </div>
                                <div class="seat br-ra2 mr-3 mt-2 d-flex justify-content-center align-items-center"
                                     style=" width:50px; height: 40px;  " v-for="i in [ '1','2','3','4','5','6','7' ]">
                                    {{i}}
                                </div>
                                <div class=" mr-3 mt-2  d-flex br-ra2 justify-content-center align-items-center"
                                     style=" width:50px; height: 40px;  "
                                     :class="{'same-day':i=='11'}"
                                     v-for="i in ['8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','1','2','3','4']">
                                    {{i}}
                                </div>
                            </div>


                        </div>
                        <div class="col  p-0">
                            <div class="f-18 f-b">Today, Sept. 11, 2020</div>
                            <div class="overflow-h-auto pr-2" style="height: 288px;  ">
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">11:00</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">11:30</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">12:00</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">12:30</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">13:00</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">13:30</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">14:00</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">14:30</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">15:00</button>

                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </template>
    </dfault-vuew>
    <div class="f-24 " style="margin-top: 180px">

    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="br-1 br-grey300 br-ra6 mt-4" style="width: 786px;">
                <div class=" d-flex flex-column p-4">
                    <div class="wid100 d-flex align-items-center">
                        <div class="bg-grey900 ft-white f-13 f-b d-flex align-items-center justify-content-center "
                             style="width: 24px; height: 24px; border-radius: 100%; line-height: 13px">2
                        </div>
                        <h2 class="mt-2 ml-4">When would you like to schedule this appointment?</h2>
                    </div>
                    <div class="wid100 mt-2 ">
                        <h3 class="ft-grey700">Choose a date and time</h3>
                    </div>
                    <div class="wid100 d-flex mt-4">
                        <div class="pl-0 mr-4" style="width: 520px">
                            <div class="d-flex justify-content-around align-items-center">
                                <i class="icon-15 cursor-p"></i>
                                <span class="f-18 f-b">September</span>
                                <i class="icon-8 cursor-p"></i>
                            </div>
                            <div class="d-flex flex-wrap justify-content-between">
                                <div class="ft-grey700 mr-3 mt-2 d-flex justify-content-center align-items-center"
                                     style=" width:50px; height: 40px;  " v-for="i in ['S','M','T','W','T','F','S' ]">
                                    {{i}}
                                </div>
                                <div class="bg-grey100 br-ra2 mr-3 mt-2 d-flex justify-content-center align-items-center"
                                     style=" width:50px; height: 40px;  " v-for="i in [ '1','2','3','4','5','6','7' ]">
                                    {{i}}
                                </div>
                                <div class=" mr-3 mt-2 br-ra2 d-flex justify-content-center align-items-center"
                                     style=" width:50px; height: 40px;  "
                                     :class="{'a-bg-pressed':i=='11','ft-white':i=='11'}"
                                     v-for="i in ['8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','1','2','3','4']">
                                    {{i}}
                                </div>
                            </div>


                        </div>
                        <div class="col  p-0">
                            <div class="f-18 f-b">Today, Sept. 11, 2020</div>
                            <div class="overflow-h-auto pr-2" style="height: 288px; ">
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">11:00</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">11:30</button>
                                <div class="d-flex mt-2">
                                    <div class="col-6 pl-0 pr-1 ">
                                        <button class="unis-btn compact-border full unis-time-pick-btn ">
                                            11:30 am
                                        </button>
                                    </div>
                                    <div class="col-6 pr-0 pl-1">
                                        <button class="unis-btn compact unis-btn-primary full">
                                            Confirm
                                        </button>
                                    </div>
                                </div>
                                <button class="unis-btn a-bg-light  unis-time-pick-btn full  br-1  mt-2">12:00</button>
                                <button class="unis-btn a-bg-light  unis-time-pick-btn full mt-2  br-1">12:30</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">13:00</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">13:30</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">14:00</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">14:30</button>
                                <button class="unis-btn compact-border full unis-time-pick-btn mt-2">15:00</button>

                            </div>
                        </div>

                    </div>

                </div>
            </div>


        </template>
        <template v-slot:htmcode>
            <div class="br-1 br-grey300 br-ra6 mt-4" style="width: 786px;">
                <div class=" d-flex flex-column p-4">
                    <div class="wid100 d-flex align-items-center">
                        <div class="bg-grey900 ft-white f-13 f-b d-flex align-items-center justify-content-center "
                             style="width: 24px; height: 24px; border-radius: 100%; line-height: 13px">2
                        </div>
                        <h2 class="mt-2 ml-4">When would you like to schedule this appointment?</h2>
                    </div>
                    <div class="wid100 mt-2 ">
                        <h3 class="ft-grey700">Choose a date and time</h3>
                    </div>
                    <div class="wid100 d-flex mt-4">
                        <div class="pl-0 mr-4" style="width: 520px">
                            <div class="d-flex justify-content-around align-items-center">
                                <i class="icon-15 cursor-p"></i>
                                <span class="f-18 f-b">September</span>
                                <i class="icon-8 cursor-p"></i>
                            </div>
                            <div class="d-flex flex-wrap justify-content-between">
                                <div class="ft-grey700 mr-3 mt-2 d-flex justify-content-center align-items-center"
                                     style=" width:50px; height: 40px;  " v-for="i in ['S','M','T','W','T','F','S' ]">
                                    {{i}}
                                </div>
                                <div class="bg-grey100 br-ra2 mr-3 mt-2 d-flex justify-content-center align-items-center"
                                     style=" width:50px; height: 40px;  " v-for="i in [ '1','2','3','4','5','6','7' ]">
                                    {{i}}
                                </div>
                                <div class=" mr-3 mt-2  d-flex justify-content-center align-items-center"
                                     style=" width:50px; height: 40px;  "
                                     :class="{'a-bg-pressed':i=='11','ft-white':i=='11'}"
                                     v-for="i in ['8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','1','2','3','4']">
                                    {{i}}
                                </div>
                            </div>


                        </div>
                        <div class="col  p-0">
                            <div class="f-18 f-b">Today, Sept. 11, 2020</div>
                            <div class="overflow-h-auto pr-2" style="height: 288px; ">
                                <button class="unis-btn compact-border full unis-btn-tertiary mt-2">11:00</button>
                                <button class="unis-btn compact-border full unis-btn-tertiary mt-2">11:30</button>
                                <div class="d-flex mt-2">
                                    <div class="col-6 pl-0 pr-1 ">
                                        <button class="unis-btn compact-border full unis-btn-tertiary ">
                                            11:30 am
                                        </button>
                                    </div>
                                    <div class="col-6 pr-0 pl-1">
                                        <button class="unis-btn compact unis-btn-primary full">
                                            Confirm
                                        </button>
                                    </div>
                                </div>
                                <button class="unis-btn a-bg-light unis-btn-table-dropdown full  mt-2 br-grey500 br-1 ">12:00</button>
                                <button class="unis-btn a-bg-light unis-btn-table-dropdown full mt-2 br-grey500 br-1 ">12:30</button>
                                <button class="unis-btn compact-border full unis-btn-tertiary mt-2">13:00</button>
                                <button class="unis-btn compact-border full unis-btn-tertiary mt-2">13:30</button>
                                <button class="unis-btn compact-border full unis-btn-tertiary mt-2">14:00</button>
                                <button class="unis-btn compact-border full unis-btn-tertiary mt-2">14:30</button>
                                <button class="unis-btn compact-border full unis-btn-tertiary mt-2">15:00</button>

                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </template>
    </dfault-vuew>
    <div class="f-24 " style="margin-top: 180px">

    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class=" mt-4 overflow-w-auto" style="width: 651px; ">
                <div class="po-r pt-3">
                    <table class="unis-info-table no-br-table table-fixed-break-all" width="100%">
                        <thead>
                        <tr>
                            <th style="width: 84px; height: 30px" class="p-0"
                                v-for="(y,index) in ['7 AM','8 AM','9 AM','10 AM','11 AM','12 PM','1 PM','2 PM','3 PM','4 PM','5 PM','6 PM','7 PM','8 PM','9 PM','10 PM','11 PM','0 AM']">
                                <div class=" br-grey300 f-b wid100 d-flex align-items-start pl-2 "
                                     :class="[(index==5)?'ft-grey900':'ft-grey700']" style="
                            border-left: 1px solid red;
                            border-right: 1px solid red; height: 30px ">{{y}}
                                    <div class="unis-icon-btn unis-dropdown unis-icon-btn-option h-w-24 ml-2 f-b br-white bg-secgreen200 ft-secgreen900"
                                         v-if="index==2||index==4">
                                        F
                                    </div>
                                </div>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td style="width: 84px;  height: 40px;  border-left: 1px solid #DADADA;
                            border-right: 1px solid #DADADA;" class="p-0" v-for="i in 18">
                                <div class=" br-grey300 wid100" style="
 border-bottom: 1px solid #989A9C;
                            padding-top: 10px;
                            ">
                                    <div style="
                                display: block; height: 30px;
                                padding-left: 7px;
                                line-height: 28px;
                                border-left-width: 4px;
                                border-top-width: 0px;
                                border-right-width: 0px;
                                border-bottom-width: 0px;
                                border-style: solid" class="f-b"
                                         :class="[(i==6)? 'bg-oceanblue400 br-oceanblue900':'bg-accentblue200 br-oceanblue700']"
                                    >75
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 84px;  height: 40px;  border-left: 1px solid #DADADA;
                            border-right: 1px solid #DADADA;" class="p-0" v-for="i in 18">
                                <div class=" br-grey300 wid100" style="
 border-bottom: 1px solid #989A9C;
                            padding-top: 10px;
                            ">
                                    <div style="
                                display: block; height: 30px;
                                padding-left: 7px;
                                line-height: 28px;
                                border-left-width: 4px;
                                border-top-width: 0px;
                                border-right-width: 0px;
                                border-bottom-width: 0px;
                                border-style: solid" class="f-b"
                                         :class="[(i==6)? 'bg-yellow400 br-yellow900':'bg-yellow200 br-yellow500']"
                                    >75
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 84px;  height: 40px;  border-left: 1px solid #DADADA;
                            border-right: 1px solid #DADADA;" class="p-0" v-for="i in 18">
                                <div class=" br-grey300 wid100" style="
 border-bottom: 1px solid #989A9C;
                            padding-top: 10px;
                            ">
                                    <div style="
                                display: block; height: 30px;
                                padding-left: 7px;
                                line-height: 28px;
                                border-left-width: 4px;
                                border-top-width: 0px;
                                border-right-width: 0px;
                                border-bottom-width: 0px;
                                border-style: solid" class="f-b"
                                         :class="[(i==6)? 'bg-grassgreen400 br-grassgreen700':'bg-grassgreen200 br-grassgreen500']"
                                    >75
                                    </div>

                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 84px;  height: 40px;  border-left: 1px solid #DADADA;
                            border-right: 1px solid #DADADA;" class="p-0" v-for="i in 18">
                                <div class=" br-grey300 wid100" style="
 border-bottom: 1px solid #989A9C;
                            padding-top: 10px;
                            ">
                                    <div style="
                                display: block; height: 30px;
                                padding-left: 7px;
                                line-height: 28px;
                                border-left-width: 4px;
                                border-top-width: 0px;
                                border-right-width: 0px;
                                border-bottom-width: 0px;
                                border-style: solid"
                                         class="f-b"
                                         :class="[(i==6)? 'bg-lavender400 br-lavender700':'bg-lavender200 br-lavender500']"
                                    >75
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="po-a d-flex flex-column justify-content-start align-items-center"
                     style="top: 0px; bottom: 0; width:8px;left: 416px; ">
                    <div style="width:8px; height: 8px; border-radius: 100%;background: #E52628"></div>
                    <div style="width:2px; flex-grow: 1;  border-radius: 100%;background: #E52628"></div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <div class=" mt-4 overflow-w-auto" style="width: 651px; ">
                <div class="po-r pt-3">
                    <table class="unis-info-table no-br-table table-fixed-break-all" width="100%">
                        <thead>
                        <tr>
                            <th style="width: 84px; height: 30px" class="p-0"
                                v-for="(y,index) in ['7 AM','8 AM','9 AM','10 AM','11 AM','12 PM','1 PM','2 PM','3 PM','4 PM','5 PM','6 PM','7 PM','8 PM','9 PM','10 PM','11 PM','0 AM']">
                                <div class=" br-grey300 f-b wid100 d-flex align-items-start pl-2 "
                                     :class="[(index==5)?'ft-accentblue900':'ft-default']" style="
                            border-left: 1px solid red;
                            border-right: 1px solid red; height: 30px ">{{y}}

                                    <div class="unis-time-pick-btn large  unis-dropdown unis-time-pick-btn large -option h-w-24 ml-2 f-b br-white bg-secgreen200 ft-secgreen900"
                                         v-if="index==2||index==4">
                                        F
                                    </div>
                                </div>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td style="width: 84px;  height: 40px;  border-left: 1px solid #DADADA;
                            border-right: 1px solid #DADADA;" class="p-0" v-for="i in 18">
                                <div class=" br-grey300 wid100" style="
 border-bottom: 1px solid #989A9C;
                            padding-top: 10px;
                            ">
                                    <div style="
                                display: block; height: 30px;
                                padding-left: 7px;
                                line-height: 28px;
                                border-left-width: 4px;
                                border-top-width: 0px;
                                border-right-width: 0px;
                                border-bottom-width: 0px;
                                border-style: solid" class="f-b"
                                         :class="[(i==6)? 'bg-oceanblue400 br-oceanblue900':'bg-accentblue200 br-oceanblue700']"
                                    >75
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 84px;  height: 40px;  border-left: 1px solid #DADADA;
                            border-right: 1px solid #DADADA;" class="p-0" v-for="i in 18">
                                <div class=" br-grey300 wid100" style="
 border-bottom: 1px solid #989A9C;
                            padding-top: 10px;
                            ">
                                    <div style="
                                display: block; height: 30px;
                                padding-left: 7px;
                                line-height: 28px;
                                border-left-width: 4px;
                                border-top-width: 0px;
                                border-right-width: 0px;
                                border-bottom-width: 0px;
                                border-style: solid" class="f-b"
                                         :class="[(i==6)? 'bg-yellow400 br-yellow900':'bg-yellow200 br-yellow500']"
                                    >75
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 84px;  height: 40px;  border-left: 1px solid #DADADA;
                            border-right: 1px solid #DADADA;" class="p-0" v-for="i in 18">
                                <div class=" br-grey300 wid100" style="
 border-bottom: 1px solid #989A9C;
                            padding-top: 10px;
                            ">
                                    <div style="
                                display: block; height: 30px;
                                padding-left: 7px;
                                line-height: 28px;
                                border-left-width: 4px;
                                border-top-width: 0px;
                                border-right-width: 0px;
                                border-bottom-width: 0px;
                                border-style: solid" class="f-b"
                                         :class="[(i==6)? 'bg-grassgreen400 br-grassgreen700':'bg-grassgreen200 br-grassgreen500']"
                                    >75
                                    </div>

                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 84px;  height: 40px;  border-left: 1px solid #DADADA;
                            border-right: 1px solid #DADADA;" class="p-0" v-for="i in 18">
                                <div class=" br-grey300 wid100" style="
 border-bottom: 1px solid #989A9C;
                            padding-top: 10px;
                            ">
                                    <div style="
                                display: block; height: 30px;
                                padding-left: 7px;
                                line-height: 28px;
                                border-left-width: 4px;
                                border-top-width: 0px;
                                border-right-width: 0px;
                                border-bottom-width: 0px;
                                border-style: solid"
                                         class="f-b"
                                         :class="[(i==6)? 'bg-lavender400 br-lavender700':'bg-lavender200 br-lavender500']"
                                    >75
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="po-a d-flex flex-column justify-content-start align-items-center"
                     style="top: 0px; bottom: 0; width:8px;left: 416px; ">
                    <div style="width:8px; height: 8px; border-radius: 100%;background: #E52628"></div>
                    <div style="width:2px; flex-grow: 1;  border-radius: 100%;background: #E52628"></div>
                </div>
            </div>
        </template>
    </dfault-vuew>
    <div style="height: 120px"></div>
</div>


<script src="../js/beautify2.js" type="text/javascript"></script>
<script src="../js/beautify-css2.js" type="text/javascript"></script>
<script src="../js/beautify-html2.js" type="text/javascript"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">

  var components = {
    template: dfaulthtml,
    props: {
      layout: {
        default: 1,
      }
    },
    data: function () {
      return {
        idShowCode: false,
        codeHtml: '',
      }
    },
    beforeCreate(){
      pageBeforeCreate();
    },
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },
  };
  new Vue({
    el: "#childApp",
    components: {'DfaultVuew': components},
    data: function () {
      return {
        idShowCode: false
      };
    },
    computed: {},
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },

  });
</script>
<script src="../js/cods.js"></script>
</body>
</html>